<template>
  <div class="record">
    <my-tabs :tab-list="tabList"></my-tabs>
    <div class="record-list" v-for="(vo, index) in recordList" :key="index">
      <div class="record-title" v-if="vo.title !== ''">
        {{ `${vo.title}年` }}
      </div>
      <div class="record-col" v-for="(list, j) in vo.list" :key="j">
        <div class="col-time">{{ list.title }}</div>
        <el-row type="flex" v-for="(item, i) in list.list" :key="i">
          <el-col :span="2">
            <div class="timeline">
              <div class="timeline-wrapper">
                {{ item.update_time | parseTime('{h}:{i}') }}
              </div>
              <div class="timeline-node"></div>
              <div class="timeline-tail" v-if="i !== list.list.length - 1"></div>
            </div>
          </el-col>
          <el-col :span="22">
            <el-row type="flex" align="middle" class="item">
              <div class="pictrue" @click="handleContinueLearning(item)">
                <edu-image :src="item.course_cover" fit="cover"></edu-image>
                <span class="time" v-if="$util.inArray(item.section_data_type, [1, 2])">
                  {{ item.current_time | formatSeconds }}
                </span>
                <span class="time" v-else>{{ item.total_time | formatSeconds }}</span>
                <span class="tag" :class="courseTypeClass[item.course_type]">{{
                  item.course_type_text
                }}</span>
              </div>
              <el-row type="flex" justify="space-between" class="info">
                <div class="title" @click="handleContinueLearning(item)">
                  {{ item.course_title }}
                </div>
                <div class="name">{{ item.section_title }}</div>
              </el-row>
              <el-button type="primary" size="mini" round @click="handleContinueLearning(item)"
                >继续学习</el-button
              >
              <!-- <span class="close el-icon-close"></span> -->
            </el-row>
          </el-col>
        </el-row>
      </div>
    </div>
    <edu-no-data v-if="$util.isEmpty(recordList)"></edu-no-data>
    <edu-pagination @handleCurrentChange="handleCurrentChange"></edu-pagination>
  </div>
</template>

<script>
import MyTabs from '../components/myTab.vue'
import EduPagination from '@/components/EduPagination'
import EduNoData from '@/components/EduNoData'
import { parseTime } from '@/utils/filters.js'
export default {
  components: {
    MyTabs,
    EduPagination,
    EduNoData
  },
  data() {
    return {
      tabList: [
        {
          title: '全部'
        }
      ],
      timelineIndex: 0,
      recordTime: '',
      recordList: [],
      courseTypeClass: {
        1: 'video',
        2: 'live',
        3: 'multipart',
        4: 'classes'
      },
      faceVisible: false,
      faceData: null
    }
  },
  mounted() {
    this.handleRecordInfo()
  },
  methods: {
    // 分页
    handleCurrentChange() {
      this.handleRecordInfo()
    },
    // 获取列表
    handleRecordInfo() {
      this.$api.getCourseRecordList(
        {
          page: this.$store.getters['paginate/page'],
          count: 20
        },
        res => {
          let list = this.yearLoction(this.handleListData(res.data.data))
          list.forEach(subItem => {
            subItem.list = this.monthLoction(subItem.list)
          })
          this.recordList = list
          this.$store.dispatch('paginate/setPaginate', {
            listRows: 20,
            total: res.data.total
          })
        }
      )
    },
    handleListData(list) {
      // 等于空直接返回
      if (this.$util.isEmpty(list)) return []

      let today = new Date()
      today.setHours(0, 0, 0, 0)
      let todayMidnightTimestamp = today.getTime()
      let currentYear = today.getFullYear()

      list.forEach(item => {
        let timeYear = parseTime(item.update_time, '{y}')
        let inputTimestamp = item.update_time * 1000

        let inputDate = new Date(inputTimestamp)
        inputDate.setHours(0, 0, 0, 0)
        let inputMidnightTimestamp = inputDate.getTime()

        let yesterday = new Date(todayMidnightTimestamp - 24 * 60 * 60 * 1000) // 前一天凌晨
        let yesterdayMidnightTimestamp = yesterday.getTime()

        let isToday = inputMidnightTimestamp === todayMidnightTimestamp // 判断是否为今天

        let isYesterday = inputMidnightTimestamp === yesterdayMidnightTimestamp // 判断是否为昨天

        let year = ''
        let month = ''
        // 是否等于当前年份
        if (timeYear == currentYear) {
          year = ''
        } else {
          year = parseTime(item.update_time, '{y}')
        }

        if (isToday) {
          month = '今天'
        } else if (isYesterday) {
          month = '昨天'
        } else {
          month = parseTime(item.update_time, '{m}月{d}日')
        }
        this.$set(item, 'year_time', year)
        this.$set(item, 'month_time', month)
      })
      return list
    },
    // 年
    yearLoction(arr) {
      let repeat = {}
      let list = []
      arr.forEach(subItem => {
        if (!repeat[subItem.year_time]) {
          let listItem = {
            title: subItem.year_time,
            list: [
              {
                ...subItem
              }
            ]
          }
          list.push(listItem)
          repeat[subItem.year_time] = true
        } else {
          for (let currItem of list) {
            if (currItem.title == subItem.year_time) {
              currItem.list.push(subItem)
            }
          }
        }
      })
      return list
    },
    // 月日
    monthLoction(arr) {
      let repeat = {}
      let list = []
      arr.forEach(subItem => {
        if (!repeat[subItem.month_time]) {
          let listItem = {
            title: subItem.month_time,
            list: [
              {
                ...subItem
              }
            ]
          }
          list.push(listItem)
          repeat[subItem.month_time] = true
        } else {
          for (let currItem of list) {
            if (currItem.title == subItem.month_time) {
              currItem.list.push(subItem)
            }
          }
        }
      })
      return list
    },
    // 继续学习
    handleContinueLearning(item) {
      if (item.expire_rest === 0) {
        this.$message.info('课程已过期')
      } else {
        this.$router.push({ path: '/course/' + item.course_id })
      }
    }
  },
  destroyed() {
    this.$store.commit('paginate/SET_PAGINATE_DEFAULT')
  }
}
</script>

<style lang="scss" scoped>
.record {
  .record-list {
    .record-title {
      font-size: 18px;
      font-weight: bold;
      color: $text-color-import;
    }
    .record-col {
      padding: 15px 0;
    }
    .col-time {
      font-size: 14px;
      color: $text-color-import;
    }
    .timeline {
      position: relative;
      height: 100%;
      padding: 15px 0;
      box-sizing: border-box;
      .timeline-wrapper {
        color: #888888;
        font-size: 12px;
      }
      .timeline-node {
        position: absolute;
        top: 18px;
        right: 20px;
        width: 6px;
        height: 6px;
        background-color: #e4e7ed;
        border-radius: 50%;
      }
      .timeline-tail {
        position: absolute;
        top: 18px;
        right: 22px;
        width: 2px;
        height: 100%;
        background-color: #e4e7ed;
      }
    }
    .item {
      padding: 15px 0;
      border-bottom: 1px solid $border-color-divider;
      position: relative;
      .pictrue {
        width: 127px;
        height: 0;
        padding-top: 70px;
        border-radius: 4px;
        position: relative;
        overflow: hidden;
        cursor: pointer;
        .el-image {
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
        }
        .time {
          position: absolute;
          right: 2px;
          bottom: 2px;
          background: rgba(0, 0, 0, 0.7);
          border-radius: 2px;
          font-size: 12px;
          color: #fff;
          padding: 2px 3px;
        }
        .tag {
          padding: 5px 8px;
          font-size: 12px;
          font-weight: 400;
          line-height: 1;
          color: #ffffff;
          box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.08);
          border-radius: 0px 0px 6px 0px;
          position: absolute;
          left: 0;
          top: 0;
          &.video {
            background-color: #ff8a8a;
          }
          &.live {
            background-color: #67c23a;
          }
          &.multipart {
            background-color: #80ccff;
          }
          &.classes {
            background-color: #ff8a52;
          }
        }
      }
      .info {
        height: 70px;
        flex: 1;
        max-width: 560px;
        flex-direction: column;
        padding: 8px 15px;
        .title {
          font-size: 14px;
          color: $text-color-import;
          cursor: pointer;
          @include ellipsis();
        }
        .name {
          font-size: 12px;
          color: $text-color-secondary;
        }
      }
      .close {
        position: absolute;
        right: 0;
        top: 10px;
        cursor: pointer;
        color: #dcdfe6;
        display: none;
      }
      &:hover {
        .close {
          display: block;
        }
      }
    }
  }
}
</style>
